<template>
  <div class="EmergencyList">
    <div class="flex location-wrap">
      <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/EmergencyResources' }">运行监测</el-breadcrumb-item>
        <el-breadcrumb-item>舞动监测</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="box">
      <!-- 列表筛选 -->
      <filterTitle @query="query" @reset="reset" :form="form" labelWidth="140px" :formData="formData">
        <!-- <el-form slot="filter" class="form" ref="form" :model="form" inline size="small" label-width="140px">
          <el-form-item :label="item.label + '：'" v-for="(item, index) in formData" :key="index" :prop="item.id">
            <LsdForm :compData="item" :form="form" />
          </el-form-item>
        </el-form> -->
      </filterTitle>
      <!-- 列表表格 -->
      <LsdTable slot="gjxm" :paginationAtrrs="paginationAtrrs" @pageChange="handleSizeChange" :compRef="table.compRef"
        ref="gjxm" :columns="table.columns" :title="table.title" :actions="table.actions" :tableData="table.tableData"
        :tableAttr="table.tableAttr" :isShowPage="table.isShowPage" :isSelectFlag="table.isSelectFlag"
        :isSequenceFlag="table.isSequenceFlag" />
      <!-- 弹窗信息 -->
      <LsdDialog :dialogConfig="dialogConfig">
        <div slot="dialog" style="width: 100%;height: 100%;"><img style="width: 100%;height: 100%;"
            src="../../assets/img/wdjc.png" alt=""></div>
      </LsdDialog>
    </div>
  </div>
</template>

<script>
import { danceDoPageList } from "@/api/OperationalMonitoring.js";
export default {
  data() {
    return {
      // 筛选信息
      formData: [
        {
          elType: "select",
          id: "dangerCode",
          label: "所属单位",
          dic: "dic_xqlb",
          attrs: {
            value: "",
            size: "small",
            clearable: true,
            filterable: true,
            "collapse-tags": true
          },
          options: []
        },
        {
          elType: "select",
          id: "dangerCode",
          label: "所属班组",
          dic: "dic_xqlb",
          attrs: {
            value: "",
            size: "small",
            clearable: true,
            filterable: true,
            "collapse-tags": true
          },
          options: []
        }
      ],
      // 表格信息
      table: {
        isSelectFlag: false, // 是否展示选择器
        compRef: "gjxm",
        isSequenceFlag: true, // 是否展示序号
        isShowPage: true, // 是否展示分页
        resetFlag: true,
        loading: false,
        title: "舞动监测列表",
        actions: [{}, {}],
        tableData: [],
        columns: [
          {
            prop: "xlmc",
            label: "线路名称",
            align: "left",
            "min-width": "180px"
          },
          {
            prop: "ssdw",
            label: "所属单位",
            align: "center",
            "min-width": "80px"
          },
          {
            prop: "whbz",
            label: "维护班组",
            align: "center",
            "min-width": "80px"
          },
          {
            prop: "fsdq",
            label: "发生地区",
            align: "center",
            "min-width": "80px"
          },
          {
            prop: "fssj",
            label: "发生时间",
            align: "center",
            "min-width": "80px"
          },
          {
            prop: "fl",
            label: "风力",
            align: "center",
            "min-width": "80px"
          },
          {
            prop: "fs",
            label: "风速",
            align: "center",
            "min-width": "80px"
          }, {
            prop: "wdt",
            label: "舞动图",
            align: "center",
            "min-width": "40px",
            render: (h, { row }) => {
              return (<div>
                {<span style='color:#3561fd;cursor:pointer;text-decoration: underline;' {...{
                  on: {
                    click: () => {
                      this.toTaskDetails(row.id, row.xlmc);
                    }
                  }
                }}>
                  查看
                </span>}
              </div>);
            }
          }
        ],
        // 表格样式
        tableAttr: {
          // "max-height": "430px",
          // height: "430px",
          border: true,
          fit: true,
          stripe: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            "font-size": "16px"
          }
        },
        pageNum: 0,
        pageSize: 10
      },
      // 分页信息
      paginationAtrrs: {
        total: 0,
        "background": true,
        layout: "prev, pager, next",
        "current-page": 1,
        "page-size": 10
      },
      activeNames: ["1", "2", "3"], // 折叠面板默认展开列
      form: {}, // 筛选from
      pageNum: 1,
      pageSize: 10,
      // 弹窗信息
      dialogConfig: {
        title: "",
        isShow: false, // 弹窗显示隐藏
        btnList: []
      }
    };
  },
  mounted() {
    this.list();
    // this.table.tableData = [
    //   {
    //     warningInfo: "2023年5月16日湖北省地质灾害气象风险预警",
    //     dangerName: "咸宁",
    //     warningLvName: "崩塌、滑坡、泥石流",
    //     effectRange: "III级（风险较大）",
    //     effectEndTime: "2023/5/16 20:00",
    //     infoSourceName: "2023年5月16日20时—5月17日20时，预计咸宁（赤壁中部和南部、崇阳、通城、通山）..."
    //   }
    // ];
  },
  methods: {
    async list() {
      const parmas = {
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };
      const res = await danceDoPageList(parmas);
      this.table.tableData = res.data;
    },
    // 检索
    query() {
      console.log("查询");
    },
    // 重置
    reset() {
      this.form = this.$options.data().form;
      this.$refs.gjxm.paginationAtrrsInner["current-page"] = 1;
    },
    // 分页
    handleSizeChange(val) {
      this.pageNum = val["current-page"];
      this.pageSize = val["page-size"];
      this.list();
    },
    toTaskDetails(id, xlmc) {
      this.dialogConfig.title = `${xlmc}-舞动图`;
      this.dialogConfig.isShow = true;
    }
  }
};

</script>

<style lang='less' scoped>
@import "../../assets/style/common.less";
@import "../../assets/style/ComponentStyle.less";
@import "../../assets/style/pop-upNotification.less";

.box {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 15px;
  background-color: #fff;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
}
</style>

